<template>
  <div id="container"></div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
let map: any = shallowRef(null);
// 初始化map
function initMap() {
  AMapLoader.load({
    key: "7e33b345ef16b95b007caed9dd06486a", //设置您的key
    version: "2.0",
    plugins: ["AMap.ToolBar", "AMap.Driving"],
    AMapUI: {
      version: "1.1",
      plugins: [],
    },
    Loca: {
      version: "2.0.0",
    },
  })
    .then((AMap) => {
      console.log(map, AMap);

      map.value = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 5, //初始化地图级别
        zooms: [2, 22],

        center: [105.602725, 37.076636], //初始化地图中心点位置
      });
      let positionArr = [
        [113.357224, 34.977186],
        [114.555528, 37.727903],
        [112.106257, 36.962733],
        [109.830097, 31.859027],
        [116.449181, 39.986142],
      ];
      for (let item of positionArr) {
        console.log(item[0], item[1]);
        let marker = new AMap.Marker({
          position: [item[0], item[1]],
        });
        console.log(marker);
        marker && map.value.add(marker);
        // console.log("123123");
      }
    })
    .catch((e) => {
      console.log(e);
    });
}
function addMarker() {}

onMounted(() => {
  initMap();
});
</script>

<style scoped lang="scss">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>
